<template>
  <el-table :data="response" style="width: 100%" :border="true">
    <el-table-column prop="title" label="title" />
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="router.push('/about/' + scope.row.id)">详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="request.page"
    v-model:page-size="request.limit"
    :page-sizes="[10, 20, 50, 100]"
    :background="true"
    :total="request.total"
    layout="sizes, prev, pager, next"
    @size-change="getList"
    @current-change="getList" />
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import type { IListRequest } from '@/types/request';
import { useRouter } from 'vue-router';
import { getListApi } from '@/api';
import type { ITopic } from '@/types/topic';

const router = useRouter();
const response = ref<ITopic[]>([]);
const request = reactive<IListRequest>({
  page: 1,
  limit: 10,
  tab: '',
  total: 1000,
});

const getList = () => {
  getListApi(request).then((res) => {
    response.value = res;
  });
};

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped></style>
